<template>
  <view class="withdraw-cash-box">
    <view class="withdraw-cash-navbar">
      <image class="to-back" src="@/static/fanhui.png" alt="" @click="goBack" />
      <text class="to-right" @click="toTransfer">转账</text>
    </view>
    <view class="withdraw-cash-remarks">
      <text class="withdraw-cash-remarks-title">备注：支付积分不支持提现</text>
    </view>
    <view class="content-center">
      <view class="balance-box">
        <view class="my-balance-head">
          乐享豆
        </view>
        <view class="my-balance-body">
          {{ setDecimalPoint(userInfo.pay_points) }}
        </view>
      </view>
      <view class="withdraw-cash-content">
        <view class="content-title">充值记录</view>
        <view class="content-list">
          <view class="list1" style="width: 50%;">时间</view>
          <view class="list2" style="width: 20%;">类型</view>
          <view class="list3" style="width: 30%;">金额</view>
        </view>
        <view class="content-list" v-for="(item, index) in logList" :key="index">
          <view class="list1" style="width: 50%;">{{ item.create_time }}</view>
          <view class="list2" style="width: 20%;">{{ item.describe }}</view>
          <view class="list3" style="width: 30%;">{{ setValueShow(item.value) }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as UserAPI from '@/api/user.js';
export default {
  data() {
    return {
      userInfo: {},
      logList: [],
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  // onLoad() {
  //   this.getUserInfo();
  //   this.getPayPointsListValue();
  // },
  onShow: function () {
    this.getUserInfo();
    this.getPayPointsListValue();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      const that = this;
      UserAPI.info().then(res => {
        if (res.status === 200) {
          that.userInfo = res.data.userInfo;
        }
      })
    },
    // 设置金额显示格式
    setValueShow(str) {
      if (str.indexOf('-') !== -1) return str;
      return `+${str}`;
    },
    // 判断是否为充值
    getIsAdd(str) {
      if (str.indexOf('-') !== -1) return '购买';
      return '充值';
    },
    // 获取积分明细列表
    getPayPointsListValue() {
      const that = this;
      UserAPI.getPayPointsList().then(res => {
        if (res.status === 200) {
          that.logList = res.data.list.data;
          console.log(res.data.list.data, 'getPayPointsListValue');
        }
      })
    },
    // 跳转转账页面
    toTransfer() {
      uni.navigateTo({ url: '/pages/wallet/lxBean/transferMoney' })
    },
    setDecimalPoint(str) {
      if (String(str).indexOf(".") !== -1) {
        return String(str).substr(0, String(str).indexOf(".") + 3)
      } else {
        return `${str}.00`
      }
    },
    goBack() {
      uni.navigateBack();
    },
  }
}
</script>

<style scoped lang="scss">
.withdraw-cash-box {
  height: 100%;
  padding-top: 10%;
  background: linear-gradient(to right, #ffecd0, #fff5e7);

  .withdraw-cash-navbar {
    position: relative;
    text-align: center;
    font-size: 18px;
    color: #c59a46;
    padding: 12px 16px;

    .to-back {
      width: 36rpx;
      height: 36rpx;
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    .to-right {
      // width: 36rpx;
      // height: 36rpx;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .withdraw-cash-remarks {
    padding: 18px 16px;
    background: rgba(255, 255, 255, .3);

    .withdraw-cash-remarks-title {
      color: #c59a46;
    }
  }

  .balance-box {
    text-align: center;
    color: #c59a46;
    padding: 20px 0;

    .my-balance-head {
      font-size: 12px;
      margin-bottom: 6px;
    }

    .my-balance-body {
      font-size: 26px;
    }
  }

  .content-center {
    min-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .withdraw-cash-content {
    width: 100vw;
    flex: 1;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 0 36rpx;

    .content-title {
      font-size: 18px;
      font-weight: 550;
      padding: 16px 0;
    }

    .content-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      font-size: 26rpx;
      font-weight: 400;

      .list2 {
        text-align: center;
      }
      .list3 {
        text-align: right;
      }
    }
  }
}
</style>